
<!--作者：薛嘉颖
描述：管理员信息管理
修改人：薛嘉颖  -->

<template>
  <div id="teacherInformationManagement">
    <!-- 搜索框 -->
    <div class="demo-input-size">
      <el-input
        v-model="input1"
        class="w-50 m-2"
        placeholder="Search"
        :suffix-icon="Search"
      />
    </div>
    <!-- 线 -->
    <div id="line">
      <hr class="langHr" />
      <hr class="shortHr" />
    </div>
    <div class="nav">
      <div class="nav1">教师个人信息
          <span></span> <span></span>   
          <hr class="leftline" >
          <hr class="rightline"></div>
      <div class="nav2">
        学生个人信息<span></span> <span></span>
        <hr class="leftline" />
        <hr class="rightline" />
      </div>
    </div>
    <!-- 上表单 -->
    <div id="searchInput">
        <el-input v-model="input2" class="w-50 m-2" placeholder="用户姓名" />
        <el-input v-model="input2" class="w-50 m-2" placeholder="工号/学号" />
        <el-input v-model="input2" class="w-50 m-2" placeholder="身份证号码 " />
        <el-input v-model="input2" class="w-50 m-2" placeholder="手机号" />
         <el-form :model="form" label-width="120px">
            <el-form-item >
                <el-select v-model="form.region" placeholder="状态">
                    <el-option label="有效" value="有效" />
                    <el-option label="无效" value="无效" />
                </el-select>
            </el-form-item>
        </el-form>
        <div id="inputBtn">
             <el-button type="primary">查询</el-button>
            <el-button type="primary">重置</el-button>
            <el-button type="primary">新增班级</el-button>
        </div>
       
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="
        margin-left: 60px;
        margin-top:110px;
        width: 1200px;
        height: 380px;
        border: 1px solid #c2dae2;
      "
      :row-class-name="tableRowClassName"
      :header-cell-style="{ background: '#c2dae2' }"
    >
      <el-table-column prop="teacherName" label="老师姓名" width="150" />
      <el-table-column prop="jobNum" label="工号" width="100" />
      <el-table-column prop="idCard" label="身份证号码" width="250" />
      <el-table-column prop="sex" label="性别" width="100" />
      <el-table-column prop="tel" label="手机号" width="180" />
      <el-table-column prop="job" label="职位" width="130" />
      <el-table-column prop="status" label="状态" width="130" />
      <el-table-column prop="operation" label="操作">
        <el-button class="dati">编辑</el-button>
        <el-button class="dati">停用</el-button>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
        v-model:currentPage="currentPage3"
        v-model:page-size="pageSize3"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next, jumper"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
 import { reactive } from "@vue/reactivity";
export default {
  name: "teacherInformationManagement",
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "defaul-row";
      } else {
        return "success-row";
      }
    },
  },
  setup() {
    const input1 = ref('');
const currentPage3 = ref(5);
const pageSize3 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const form = reactive({
//   name: '',
  region: '',
//   date1: '',
//   date2: '',
//   delivery: false,
//   type: [],
//   resource: '',
//   desc: '',
});

const handleSizeChange = (val) => {
  console.log(val)
  console.log('${val} items per page')
}
const handleCurrentChange = (val) => {
  console.log('current page: ${val}')
}
    const tableData = [
      {
        teacherName: "李海力",
        jobNum: "008",
        idCard: "350305200105130045",
        sex: "男",
        tel: "13536190078",
        job: "助教",
        status:"有效",
        operation: "操作",
      },
       {
        teacherName: "李海力",
        jobNum: "008",
        idCard: "350305200105130045",
        sex: "男",
        tel: "13536190078",
        job: "助教",
        status:"有效",
        operation: "操作",
      },
     {
        teacherName: "李海力",
        jobNum: "008",
        idCard: "350305200105130045",
        sex: "男",
        tel: "13536190078",
        job: "助教",
        status:"有效",
        operation: "操作",
      },
    {
        teacherName: "李海力",
        jobNum: "008",
        idCard: "350305200105130045",
        sex: "男",
        tel: "13536190078",
        job: "助教",
        status:"有效",
        operation: "操作",
      },
    {
        teacherName: "李海力",
        jobNum: "008",
        idCard: "350305200105130045",
        sex: "男",
        tel: "13536190078",
        job: "助教",
        status:"有效",
        operation: "操作",
      },
    {
        teacherName: "李海力",
        jobNum: "008",
        idCard: "350305200105130045",
        sex: "男",
        tel: "13536190078",
        job: "助教",
        status:"有效",
        operation: "操作",
      },
      {
        teacherName: "李海力",
        jobNum: "008",
        idCard: "350305200105130045",
        sex: "男",
        tel: "13536190078",
        job: "助教",
        status:"有效",
        operation: "操作",
      },
        
    ];

    return {
      tableData,
      form,
      handleSizeChange,
      handleCurrentChange
    };
  },
};
</script>






<style lang='less' scoped>
 /deep/.demo-input-size {
  .el-input__inner {
    width: 200px;
    background-color: rgb(194, 218, 226);
    border: 1px solid rgb(112, 110, 110);
    border-radius: 80px;
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: 60px;
  }
}
#line {
  margin-top: -70px;
  margin-bottom: 70px;
  .langHr {
    margin: 10px 60px;
    border: 1px solid rgb(194, 218, 226);
    margin-top: 90px;
    background-color: rgb(194, 218, 226);
  }
  .shortHr {
    margin-left: 60px;
    width: 200px;
    border: 4px solid rgb(62, 148, 173);
    margin-top: -15px;
    margin-bottom: 40px;
    border-radius: 20px;
    background-color: rgb(62, 148, 173);
  }
}
.nav {
      margin-left: 100px;
    position: absolute;
    margin-top: -58px;
  .nav1,
  .nav2 {
    position: relative;
    width: 100px;
    height: 40px;
    border: 1px #999 solid;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
    span {
      position: absolute;
      width: 4px;
      height: 4px;
      border: 1px #999 solid;
      border-radius: 50%;
      top: 3px;
      background-color: white;
    }
    span:nth-child(1) {
      left: 20px;
    }
  }
  .nav1 {
    // background-color: white;
    background-color: #3e94ad;
    margin-bottom: 10px;
    color: white;
    hr {
      width: 28px;
      transform: rotate(90deg);
      position: absolute;
      top: -7px;
      background-color: #999;
    }
    .leftline {
      left: 8px;
      border: 1px solid #999;
    }
    .rightline {
      left: 66px;
      border: 1px solid #999;
    }
  }
  .nav2 {
    // background-color: #3e94ad;
    background-color: white;
    color: black;
    margin-bottom: -30px;
    hr {
      width: 17px;
      transform: rotate(90deg);
      position: absolute;
      top: -3px;
      background-color: #999;
    }
    .leftline {
      left: 13px;
      border: 1px solid #999;
    }
    .rightline {
      left: 72px;
      border: 1px solid #999;
    }
  }
}
#searchInput{
    margin-left: 400px;
    margin-top: -60px;
    position: absolute;
    width: 800px;
    .el-input{
            width: 250px;
            padding-left: 15px;
            padding-top: 10px;
    }
    .el-form{
        .el-form-item{
            margin-left: 160px;
            width: 250px;
            margin-top: -30px;
        }
    }
    #inputBtn{
        margin-left: 500px;
        margin-top: -60px;
        .el-button{
        margin-top: 10px;
        margin-right: 20px;
        background-color: rgb(62, 148, 173);
    }
    }
    
}
.success-row {
  background-color: #c2dae2 !important;
}
.demo-pagination-block{
   padding: 20px 420px;
    .demo-pagination-block + .demo-pagination-block {
      margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
      margin-bottom: 10px;
      margin-left: 60px;

    }
}

</style>
